import 'dart:io';

import 'package:chatgreat/helper/color.dart';
import 'package:chatgreat/helper/my_widget.dart';
import 'package:chatgreat/page/component/background_container.dart';
import 'package:chatgreat/page/component/sliver_component.dart';
import 'package:chatgreat/page/component/theme/custom_size.dart';
import 'package:chatgreat/page/component/theme/custom_theme.dart';
import 'package:chatgreat/repo/settings_repo.dart';
import 'package:dotted_border/dotted_border.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:go_router/go_router.dart';
import 'package:image_picker/image_picker.dart';
// import 'package:stripe_js/stripe_js.dart';

import '../../../repo/api_server.dart';
import '../../helper/upload.dart';
import '../component/dialog.dart';
import '../component/enhanced_textfield.dart';

class HomeHelpScreen extends StatefulWidget {
  final SettingRepository setting;

  const HomeHelpScreen({
    super.key,
    required this.setting,
  });

  @override
  State<HomeHelpScreen> createState() => _HomeHelpScreenState();
}

enum GenerateStatus { display, generating, over }

class _HomeHelpScreenState extends State<HomeHelpScreen> {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final customColors = Theme.of(context).extension<CustomColors>()!;
    return BackgroundContainer(
      setting: widget.setting,
      child: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage('images/bg1.png'),
            fit: BoxFit.fill,
          ),
        ),
        child: Scaffold(
          backgroundColor: Colors.transparent,
          body: _buildFeedbackWidget(customColors),
        ),
      ),
    );
  }

  /// 反馈问题
  Widget _buildFeedbackWidget(
    CustomColors customColors,
  ) {
    return SliverCreateComponent(
      title: const Text(
        "帮助",
        style: TextStyle(
          fontSize: CustomSize.appBarTitleSize,
          color: Colors.white,
        ),
      ),
      leading: IconButton(
        icon: Icon(
          Icons.arrow_back,
          color: customColors.weakLinkColor,
        ),
        onPressed: () {
          if (context.canPop()) {
            context.pop();
          }
        },
      ),
      child: Column(
        children: [
          Expanded(
            child: ListView(
              padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 15),
              shrinkWrap: true,
              children: [
                Row(
                  children: [
                    Container(
                      width: 7,
                      height: 7,
                      margin: const EdgeInsets.only(left: 3),
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(3.5)),
                    ),
                    const SizedBox(width: 6),
                    MyTextWeight('如何进行AI对话', 17, Colors.white, FontWeight.w500),
                  ],
                ),
                const SizedBox(height: 20),
                MyTextWeight(
                    '您在首页使用产品时，直接点击问题或者通过输入框输入问题，就可以直接进入和AI的交互式文档，如果您需要跟垂直的领域服务，可以通过助理页或者创作页进行使用。',
                    15,
                    Colors.white,
                    FontWeight.w500),
                const SizedBox(height: 18),
                Image.asset('images/help_tu1.png', fit: BoxFit.fitWidth,),
                const SizedBox(height: 24),
                Row(
                  children: [
                    Container(
                      width: 7,
                      height: 7,
                      margin: const EdgeInsets.only(left: 3),
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(3.5)),
                    ),
                    const SizedBox(width: 6),
                    MyTextWeight('如何制作高清图画', 17, Colors.white, FontWeight.w500),
                  ]
                ),
                const SizedBox(height: 20),
                MyTextWeight(
                    '高清画图无法在首页问答中进行体现，需要您通过画画页面模块，选择合适的作画模型和风格进行画图，您也可以自主的输入您需要的风格参数，来获取想要的画图结果。',
                    15,
                    Colors.white,
                    FontWeight.w500),
                const SizedBox(height: 18),
                Image.asset('images/help_tu2.png', fit: BoxFit.fitWidth),

                const SizedBox(height: 24),
                Row(
                    children: [
                      Container(
                        width: 7,
                        height: 7,
                        margin: const EdgeInsets.only(left: 3),
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(3.5)),
                      ),
                      const SizedBox(width: 6),
                      MyTextWeight('产品使用是否免费？', 17, Colors.white, FontWeight.w500),
                    ]
                ),
                const SizedBox(height: 20),
                MyTextWeight(
                    'AI智能模型对话需要消耗大量的算力成本，我们无法提供大量用户同时的咨询成本，如果您喜欢本产品，可以通过VIP页面购买成为VIP会员，即可享受随时进行免费的对话聊天。',
                    15,
                    Colors.white,
                    FontWeight.w500),
                const SizedBox(height: 18),
                Image.asset('images/help_tu3.png', fit: BoxFit.fitWidth,),
                const SizedBox(height: 24),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
